<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="Hexo Theme Redefine">
    
    <meta name="author" content="冷武汶">
    <!-- preconnect -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://evan.beee.top" crossorigin>
    
    <!--- Seo Part-->
    
    <link rel="canonical" href="http://example.com/2023/04/21/vue3开发文档/"/>
    <meta name="robots" content="index,follow">
    <meta name="googlebot" content="index,follow">
    <meta name="revisit-after" content="1 days">
    
        <meta name="description" content="Vue3.x开发文档1 特点渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合  易用已经知道HTML&#x2F;CSS&#x2F;JavaScript即可使用。 灵活可以在一个库和一个完整框架之间自由使用。 高效运行大小20KB,超快虚拟DOM,最省心的优化  2 Vue3.x VS  Vue2.x 主要改进2.1 提">
<meta property="og:type" content="article">
<meta property="og:title" content="vue3开发文档">
<meta property="og:url" content="http://example.com/2023/04/21/vue3%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3/index.html">
<meta property="og:site_name" content="hi">
<meta property="og:description" content="Vue3.x开发文档1 特点渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合  易用已经知道HTML&#x2F;CSS&#x2F;JavaScript即可使用。 灵活可以在一个库和一个完整框架之间自由使用。 高效运行大小20KB,超快虚拟DOM,最省心的优化  2 Vue3.x VS  Vue2.x 主要改进2.1 提">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2023-04-21T06:22:58.000Z">
<meta property="article:modified_time" content="2023-04-21T07:16:46.609Z">
<meta property="article:author" content="武汶">
<meta property="article:tag" content="vue">
<meta name="twitter:card" content="summary">
    
    <!--- Icon Part-->
    <link rel="icon" type="image/png" href="/images/avatar.jpg" sizes="192x192">
    <link rel="apple-touch-icon" sizes="180x180" href="/images/avatar.jpg">
    <meta name="theme-color" content="#A31F34">
    <link rel="shortcut icon" href="/images/avatar.jpg">
    <!--- Page Info-->
    
    <title>
        
            vue3开发文档 -
        
        hi
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    
<link rel="stylesheet" href="/assets/fonts.css">

    <!--- Font Part-->
    
    
    
        <link href="" rel="stylesheet">
    
    

    <!--- Inject Part-->
    
    <script id="hexo-configurations">
    let Global = window.Global || {};
    Global.hexo_config = {"hostname":"example.com","root":"/","language":"zh-CN"};
    Global.theme_config = {"articles":{"style":{"font_size":"16px","line_height":1.5,"image_border_radius":"14px","image_alignment":"center","image_caption":false,"link_icon":true},"word_count":{"enable":true,"count":true,"min2read":true},"author_label":{"enable":true,"auto":false,"list":[""]},"code_block":{"copy":true,"style":"mac","font":{"enable":false,"family":null,"url":null}},"toc":{"enable":true,"max_depth":3,"number":false,"expand":true,"init_open":true},"copyright":false,"lazyload":true,"recommendation":{"enable":false,"title":"推荐阅读","limit":3,"placeholder":"/images/wallhaven-wqery6-light.webp","skip_dirs":[]},"powered":false},"colors":{"primary":"#A31F34","secondary":null},"global":{"fonts":{"chinese":{"enable":true,"family":null,"url":null},"english":{"enable":false,"family":null,"url":null}},"content_max_width":"1000px","sidebar_width":"210px","hover":{"shadow":true,"scale":false},"scroll_progress":{"bar":false,"percentage":true},"busuanzi_counter":{"enable":false,"site_pv":true,"site_uv":true,"post_pv":true},"pjax":false,"open_graph":true},"home_banner":{"enable":true,"image":{"light":"/images/wallhaven-wqery6-light.webp","dark":"/images/wallhaven-wqery6-dark.webp"},"title":"Hi","subtitle":{"text":["貴方はいつ あのすっごく会いたい人に会いに行くかな"],"hitokoto":{"enable":false,"api":"https://v1.hitokoto.cn"},"typing_speed":100,"backing_speed":80,"starting_delay":500,"backing_delay":1500,"loop":true,"smart_backspace":true},"text_color":{"light":"#fff","dark":"#d1d1b6"},"text_style":{"title_size":"2.6rem","subtitle_size":"1.4rem","line_height":1.2},"custom_font":{"enable":false,"family":null,"url":null},"social_links":{"enable":true,"links":{"github":null,"instagram":null,"zhihu":null,"twitter":null,"email":"1161839630@qq.com"}}},"plugins":{"feed":{"enable":false},"aplayer":{"enable":false,"type":"mini","audios":[{"name":null,"artist":null,"url":null,"cover":null}]},"mermaid":{"enable":false,"version":"9.3.0"}},"version":"2.1.2","navbar":{"auto_hide":true,"color":{"left":"#f78736","right":"#367df7","transparency":12},"links":{"Home":{"path":"/","icon":"fa-regular fa-house"},"About":{"icon":"fa-regular fa-user","path":"/about"},"Links":{"icon":"fa-regular fa-link","submenus":{"chatgpt":"http://www.lengwuwen.cn"}}},"search":{"enable":false,"preload":true}},"page_templates":{"friends_column":2,"tags_style":"blur"},"home":{"sidebar":{"enable":true,"position":"left","first_item":"menu","announcement":null,"links":{"关于我":{"path":"/about","icon":"fa-brands fa-weixin fa-tags"}}},"article_date_format":"YYYY-MM-DD","categories":{"enable":true,"limit":3},"tags":{"enable":true,"limit":3}}};
    Global.language_ago = {"second":"%s 秒前","minute":"%s 分钟前","hour":"%s 小时前","day":"%s 天前","week":"%s 周前","month":"%s 个月前","year":"%s 年前"};
  </script>
    
    <!--- Fontawesome Part-->
    
<link rel="stylesheet" href="/fontawesome/fontawesome.min.css">

    
<link rel="stylesheet" href="/fontawesome/brands.min.css">

    
<link rel="stylesheet" href="/fontawesome/solid.min.css">

    
<link rel="stylesheet" href="/fontawesome/regular.min.css">

    
    
    
    
<meta name="generator" content="Hexo 5.4.2"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="main-content-container">

        <div class="main-content-header">
            <header class="navbar-container">
    
    <div class="navbar-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                
                hi
                
            </a>
        </div>

        <div class="right">
            <!-- PC -->
            <div class="desktop">
                <ul class="navbar-list">
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="" 
                                    href="/"  >
                                    
                                        
                                            <i class="fa-regular fa-house"></i>
                                        
                                        首页
                                    
                                </a>
                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="" 
                                    href="/about"  >
                                    
                                        
                                            <i class="fa-regular fa-user"></i>
                                        
                                        关于
                                    
                                </a>
                                <!-- Submenu -->
                                
                            </li>
                    
                        
                            <li class="navbar-item">
                                <!-- Menu -->
                                <a class="has-dropdown" 
                                    href="#" onClick="return false;">
                                    
                                        
                                            <i class="fa-regular fa-link"></i>
                                        
                                        链接&nbsp;<i class="fa-solid fa-chevron-down"></i>
                                    
                                </a>
                                <!-- Submenu -->
                                
                                    <ul class="sub-menu">
                                    
                                        <li>
                                        <a target="_blank" rel="noopener" href="http://www.lengwuwen.cn">CHATGPT
                                        </a>
                                        </li>
                                    
                                    </ul>
                                
                            </li>
                    
                    
                </ul>
            </div>
            <!-- Mobile -->
            <div class="mobile">
                
                <div class="icon-item navbar-bar">
                    <div class="navbar-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile drawer -->
    <div class="navbar-drawer">
        <ul class="drawer-navbar-list">
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="" 
                        href="/"  >
                             
                                
                                    <i class="fa-regular fa-house"></i>
                                
                                首页
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                    
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="" 
                        href="/about"  >
                             
                                
                                    <i class="fa-regular fa-user"></i>
                                
                                关于
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                    
            
                
                    <li class="drawer-navbar-item flex-center">
                        <a class="has-dropdown" 
                        href="#" onClick="return false;">
                            
                                
                                    <i class="fa-regular fa-link"></i>
                                
                                链接&nbsp;<i class="fa-solid fa-chevron-down"></i>
                            
                        </a>
                    </li>
                    <!-- Submenu -->
                              
                        
                            <li class="dropdown-item flex-center">
                                <a class="dropdown-item" target="_blank" rel="noopener" href="http://www.lengwuwen.cn">CHATGPT</a>
                            </li>
                        
                    
            

        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="main-content-body">

            

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="post-page-container">
        <div class="article-content-container">

            
            
                <div class="article-title">
                    <h1 class="article-title-regular">vue3开发文档</h1>
                </div>
            
                
            

            
                <div class="article-header">
                    <div class="avatar">
                        <img src="/images/avatar.jpg">
                    </div>
                    <div class="info">
                        <div class="author">
                            <span class="name">冷武汶</span>
                            
                                <span class="author-label"></span>
                            
                        </div>
                        <div class="meta-info">
                            <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fa-regular fa-pen-fancy"></i>&nbsp;
        <span class="desktop">2023-04-21 14:22:58</span>
        <span class="mobile">2023-04-21 14:22</span>
        <span class="hover-info">创建</span>
    </span>
    
        <span class="article-date article-meta-item">
            <i class="fa-regular fa-wrench"></i>&nbsp;
            <span class="desktop">2023-04-21 15:16:46</span>
            <span class="mobile">2023-04-21 15:16</span>
            <span class="hover-info">更新</span>
        </span>
    

    
    
        <span class="article-tags article-meta-item">
            <i class="fa-regular fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/vue/">vue</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
    
    
</div>

                        </div>
                    </div>
                </div>
            

            <div class="article-content markdown-body">
                <h1 id="Vue3-x开发文档"><a href="#Vue3-x开发文档" class="headerlink" title="Vue3.x开发文档"></a>Vue3.x开发文档</h1><h1 id="1-特点"><a href="#1-特点" class="headerlink" title="1 特点"></a>1 特点</h1><p><strong>渐进式框架</strong>。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合</p>
<ul>
<li>易用<br>已经知道HTML/CSS/JavaScript即可使用。</li>
<li>灵活<br>可以在一个库和一个完整框架之间自由使用。</li>
<li>高效<br>运行大小20KB,超快虚拟DOM,最省心的优化</li>
</ul>
<h1 id="2-Vue3-x-VS-Vue2-x-主要改进"><a href="#2-Vue3-x-VS-Vue2-x-主要改进" class="headerlink" title="2 Vue3.x VS  Vue2.x 主要改进"></a>2 Vue3.x <code>VS</code>  Vue2.x 主要改进</h1><h2 id="2-1-提升运行时性能：重写-VDOM"><a href="#2-1-提升运行时性能：重写-VDOM" class="headerlink" title="2.1 提升运行时性能：重写 VDOM"></a>2.1 提升运行时性能：重写 VDOM</h2><ul>
<li>VDOM【Virtual DOM】<ul>
<li>虚拟DOM元素，视图层框架最重要的就是尽量减少DOM操作的开销，优化dom操作，提示性能。</li>
</ul>
</li>
<li>Vue3.x 对比 Vue2.x的优化效果。<ul>
<li>性能提升 30% ~ 300%。</li>
</ul>
</li>
<li>实现的核心<ul>
<li>跳过静态节点，只处理动态节点，编译的工作量大大减少。【静态标记】</li>
</ul>
</li>
</ul>
<h2 id="2-2-提升网络性能：-tree-shaking-机制"><a href="#2-2-提升网络性能：-tree-shaking-机制" class="headerlink" title="2.2 提升网络性能： tree-shaking 机制"></a>2.2 提升网络性能： <code>tree-shaking</code> 机制</h2><ul>
<li>tree的介绍<ul>
<li>依赖树，所有的依赖都是tree的节点。</li>
</ul>
</li>
<li>怎么shaking的?<ul>
<li>通过代码反向检测哪些特性被用到，把用到的打包，其余均不打包。</li>
</ul>
</li>
<li>达到的结果<ul>
<li>只打包必要的依赖项，最终打包的体积减少，优化性能。<h2 id="2-3-完全的-typeScript-支持"><a href="#2-3-完全的-typeScript-支持" class="headerlink" title="2.3 完全的 typeScript 支持"></a>2.3 完全的 <code>typeScript</code> 支持</h2></li>
</ul>
</li>
<li>强大的类型系统，类型提示，泛型，接口。<ul>
<li>大型应用开发必备，bug率减少20%.</li>
</ul>
</li>
<li>Vue3对TS完美支持。<ul>
<li>完全使用typeScript重写</li>
</ul>
</li>
<li>开发工具支持<ul>
<li>主流开发工具TS支持非常友好。</li>
</ul>
</li>
</ul>
<h2 id="2-4-对用户的便利性改进"><a href="#2-4-对用户的便利性改进" class="headerlink" title="2.4 对用户的便利性改进"></a>2.4 对用户的便利性改进</h2><ul>
<li>Fragment： 模板更简单，template无需唯一根节点。</li>
<li>Teleport： 布局更灵活。</li>
<li>Suspense： 强大的异步组件。</li>
<li><code>composition-api</code>： 逻辑重用<ul>
<li>代替了mixin</li>
</ul>
</li>
</ul>
<h2 id="2-5-生态圈改进"><a href="#2-5-生态圈改进" class="headerlink" title="2.5 生态圈改进"></a>2.5 生态圈改进</h2><ul>
<li><p>vue-router@next</p>
</li>
<li><p>vuex@next</p>
</li>
<li><p>vue-cli-plugin-vue-enxt</p>
</li>
<li><p>text-utils@next</p>
</li>
<li><p>DevTools  vite</p>
</li>
<li><p>Vue2.7</p>
<ul>
<li>融入部分Vue3功能</li>
<li>Vue2.x支持18个月，之后以安全性更新为主。<h2 id="2-6-Vue3-x向下兼容"><a href="#2-6-Vue3-x向下兼容" class="headerlink" title="2.6 Vue3.x向下兼容"></a>2.6 Vue3.x向下兼容</h2></li>
</ul>
</li>
<li><p>大部分api都没有变化，完全兼容2.x的写法</p>
</li>
<li><p>主要改进的api和变化如下文档所述</p>
</li>
<li><p>官方推出<code>2.6.12</code>版本，预计还会推出<code>2.7.x</code>版本，当大家平滑过渡</p>
</li>
<li><p>官网有完善的2.x到3.x的迁徙文档。</p>
<h1 id="3-安装"><a href="#3-安装" class="headerlink" title="3 安装"></a>3 安装</h1><h2 id="3-1-标准安装"><a href="#3-1-标准安装" class="headerlink" title="3.1 标准安装"></a>3.1 标准安装</h2></li>
<li><p>全局安装新版本脚手架 <code>Vue CLi v4.5</code> 以上</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">yarn <span class="variable language_">global</span> add @vue/cli</span><br><span class="line"># <span class="variable constant_">OR</span></span><br><span class="line">npm i -g @vue/cli</span><br><span class="line"># 检测当前版本号</span><br><span class="line">vue --version   <span class="comment">// @vue/cli 4.5.6</span></span><br></pre></td></tr></table></figure></div></li>
<li><p>使用命令创建项目目录</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue create 项目名   <span class="comment">// 选择 3.x 版本 其余选项和2.x一致</span></span><br></pre></td></tr></table></figure></div></li>
<li><p>进入项目目录，再项目中运行</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue upgrade --next <span class="comment">// 所有相关插件更新到最新版本</span></span><br></pre></td></tr></table></figure></div></li>
<li><p>启动开发服务器 或 打包</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"># 启动开发服务器</span><br><span class="line">yarn serve</span><br><span class="line"># 打包</span><br><span class="line">yarn build</span><br></pre></td></tr></table></figure></div>
<h2 id="3-2-vite"><a href="#3-2-vite" class="headerlink" title="3.2 vite"></a>3.2 vite</h2><p>​    vue是一个web开发构建工具，基于原生<code>ES Module</code>的能力加载模块，速度非常之快【大型项目webpack构建速度慢，有时候改一个东西要等好几秒，vite实现秒开】</p>
</li>
<li><p>使用npm</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 创建项目</span><br><span class="line">npm init vite-app 项目名 </span><br><span class="line"># 进入项目 安装依赖</span><br><span class="line">npm i</span><br><span class="line"># 启动项目</span><br><span class="line">npm run dev</span><br></pre></td></tr></table></figure></div></li>
<li><p>使用yarn</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"># 创建项目</span><br><span class="line">yarn create vite-app 项目名</span><br><span class="line"># 进入项目 安装依赖</span><br><span class="line">yarn</span><br><span class="line"># 启动项目</span><br><span class="line">yarn dev</span><br></pre></td></tr></table></figure></div>
<h2 id="3-3-项目目录详解"><a href="#3-3-项目目录详解" class="headerlink" title="3.3 项目目录详解"></a>3.3 项目目录详解</h2></li>
<li><p>一级目录详解</p>
<ul>
<li>node_modules // 依赖模块</li>
<li>public  // 静态服务器</li>
<li>src // 开发源目录</li>
<li>.gitignore // git忽略列表</li>
<li>babel.config.js // babel配置</li>
<li>package.json  // 包描述</li>
<li>yarn.lock  // 详细包信息 Yarn需要锁定整个依赖关系树中所有包的版本的所有内容</li>
</ul>
</li>
<li><p>二级开发目录 <code>src</code> 详解</p>
<ul>
<li>assets // 静态资源</li>
<li>components  // 组件 一般是基础组件 或 通用的业务组件</li>
<li>App.vue  // 根组件</li>
<li>main.js  // 入口文件</li>
</ul>
</li>
</ul>
<h2 id="3-4-初始代码详解"><a href="#3-4-初始代码详解" class="headerlink" title="3.4 初始代码详解"></a>3.4 初始代码详解</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># main.<span class="property">js</span>  </span><br><span class="line"><span class="keyword">import</span> &#123; createApp &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span> <span class="comment">// 引入vue创建整个应用对象的方法 createApp</span></span><br><span class="line"><span class="keyword">import</span> <span class="title class_">App</span> <span class="keyword">from</span> <span class="string">&#x27;./App.vue&#x27;</span> <span class="comment">// 引入根组件</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">createApp</span>(<span class="title class_">App</span>).<span class="title function_">mount</span>(<span class="string">&#x27;#app&#x27;</span>) <span class="comment">// 把根组件传入 创建应用对象 挂载public/index.html 中id为app的div容器</span></span><br></pre></td></tr></table></figure></div>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// App.vue</span></span><br><span class="line"># 和<span class="number">2.</span>x对比 template可以写多个根节点 没有一个根节点的限制 代码提示工具还没有更新</span><br><span class="line">&lt;template&gt;</span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">h1</span>&gt;</span>欢迎使用Vue3.x<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line">    <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>我是内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"># <span class="variable constant_">JS</span>代码</span><br><span class="line">&lt;script&gt;</span><br><span class="line">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line"># <span class="variable constant_">CSS</span>样式</span><br><span class="line">&lt;style lang=<span class="string">&quot;less&quot;</span> scoped&gt;</span><br><span class="line"></span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure></div>

<h1 id="4-setup"><a href="#4-setup" class="headerlink" title="4 setup"></a>4 setup</h1><p> <code>setup</code> 函数是一个新的组件选项。作为在组件内使用 Composition API 【组合式API】的入口点。 </p>
<p>  <code>setup  </code>  选项的写法是一个函数，和 <code>data</code> 选项相同。</p>
<h2 id="4-1-调用时机"><a href="#4-1-调用时机" class="headerlink" title="4.1 调用时机"></a>4.1 调用时机</h2><p>创建组件实例，然后初始化 props，紧接着就好调用 <code>setup</code> 函数。从生命周期钩子函数的视角来看，它会在<code>beforeCreate </code> 之前就被调用。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;App&quot;</span>,</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;1.执行了setup...&quot;</span>); <span class="comment">// 执行时机比较早 在beforeCreate之前</span></span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">beforeCreate</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;2.执行beforeCreate..&quot;</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">created</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;3.执行created..&quot;</span>, <span class="variable language_">this</span>.<span class="property">a</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure></div>

<h2 id="4-2-模板中使用"><a href="#4-2-模板中使用" class="headerlink" title="4.2 模板中使用"></a>4.2 模板中使用</h2><p>如果 <code>setup</code> 返回一个对象，则对象的属性会被组件模板的渲染上下文，可以直接在模板中使用。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123; count &#125;&#125; &#123;&#123; obj.name &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">import</span> &#123; ref, reactive &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">0</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">const</span> obj = <span class="title function_">reactive</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;小貂蝉&#x27;</span> &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="comment">// 暴露给模板</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        count,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        obj,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>

<p>注意 <code>setup</code> 返回的ref在模板中会自动解开，可以直接使用值，不需要 <code>.value</code>。    </p>
<h2 id="4-3-参数"><a href="#4-3-参数" class="headerlink" title="4.3 参数"></a>4.3 参数</h2><p><code>setup</code> 函数接收 props 作为其第一个参数:</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">props</span>: &#123; <span class="comment">// 外部传入参数</span></span><br><span class="line">    <span class="attr">name</span>: <span class="title class_">String</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;接收到的参数:&quot;</span>, props.<span class="property">name</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></div>

<p>注意 <code>props</code> 对象是响应式的，<code>watchEffect</code> 或 <code>watch</code> 会观察和响应 props 的更新：</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="title class_">String</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">props</span>) &#123;</span><br><span class="line">    <span class="comment">// 当父组件的props传入的参数更新后，子组件props同步更新</span></span><br><span class="line">    <span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;接收到的参数:&quot;</span>, props.<span class="property">name</span>);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></div>

<p>注意： 不要结构 <code>props</code> 对象，会失去响应性。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">  <span class="attr">props</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="title class_">String</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="title function_">setup</span>(<span class="params">&#123; name &#125;</span>) &#123; <span class="comment">// 解构了props props就不再是响应式数据了</span></span><br><span class="line">    <span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;接收到的参数:&quot;</span>, name);</span><br><span class="line">    &#125;);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">&lt;/script&gt;</span><br></pre></td></tr></table></figure></div>

<p>第二个参数提供了一个上下文对象，从原来2.x中的 <code>this</code> 选择地暴露一些属性</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(context); <span class="comment">// 输出结果如下</span></span><br><span class="line">  <span class="comment">/*</span></span><br><span class="line"><span class="comment">  attrs: &#123; ... &#125;</span></span><br><span class="line"><span class="comment">  emit: &#123;  ... &#125;</span></span><br><span class="line"><span class="comment">  slots: &#123; ... &#125;</span></span><br><span class="line"><span class="comment">  */</span> </span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure></div>

<h2 id="4-4-this的用法"><a href="#4-4-this的用法" class="headerlink" title="4.4 this的用法"></a>4.4 this的用法</h2><p><code>this</code> 在 <code>setup</code> 中不可用。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">setup</span>(<span class="params">props, context</span>) &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">this</span>); <span class="comment">// undefined</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div>

<h1 id="5-响应式系统api"><a href="#5-响应式系统api" class="headerlink" title="5 响应式系统api"></a>5 响应式系统api</h1><h2 id="5-1-reactive"><a href="#5-1-reactive" class="headerlink" title="5.1 reactive"></a>5.1 reactive</h2><p>接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 <code>Vue.observable()</code></p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj = <span class="title function_">reactive</span>(&#123; <span class="attr">name</span>: <span class="string">&#x27;小貂蝉&#x27;</span> &#125;) <span class="comment">// 该对象数据变为响应式数据</span></span><br></pre></td></tr></table></figure></div>

<p>响应式转换是“深层次的”，会影响到对象内部所有嵌套属性。基于ES6的 Proxy 实现，返回的代理对象 <strong>不等于</strong> 原始对象。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 之后对对象添加属性 删除属性 都会响应式更新dom</span></span><br><span class="line"><span class="keyword">const</span> user = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">  <span class="attr">prop</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;赵子龙&quot;</span>,</span><br><span class="line">    <span class="attr">age</span>: <span class="number">19</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="attr">compony</span>: &#123;</span><br><span class="line">    <span class="attr">name</span>: <span class="string">&quot;德国&quot;</span>,</span><br><span class="line">    <span class="attr">departMent</span>: <span class="string">&quot;H5&quot;</span>,</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></div>

<h2 id="5-2-ref"><a href="#5-2-ref" class="headerlink" title="5.2 ref"></a>5.2 ref</h2><p>接收一个参数值并返回一个响应式且可改变的 <code>ref</code> 对象，<code>ref</code> 对象拥有一个指向内部值的属性 <code>.value</code></p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">setup</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">0</span>)  <span class="comment">// count可以让一个数字变成响应式的ref对象</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>( count.<span class="property">value</span> )  <span class="comment">// 0 响应ref对象，内部有一个value值 </span></span><br><span class="line">    </span><br><span class="line">    <span class="keyword">function</span> <span class="title function_">add</span>(<span class="params"></span>) &#123;</span><br><span class="line">       count.<span class="property">value</span>++</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> &#123;</span><br><span class="line">        count,  <span class="comment">// 返回的count直接使用在template模板中，就是响应式的数据</span></span><br><span class="line">        add <span class="comment">// 点击事件触发add count发生变化 dom自动渲染更新</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div>

<p>__注意__：</p>
<ul>
<li><p>当 ref 响应对象 <code>count</code> 在 <code>setup </code>中返回时，在 <code>template</code> 中渲染，不需要写  <code>.value</code></p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">	<span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123; count &#125;&#125; <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span>    </span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">	<span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">                <span class="attr">count</span>:<span class="title function_">ref</span>(<span class="number">0</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">            &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;        </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div></li>
<li><p>当 ref 作为一个 reactive 对象的属性被修改或者访问时，也不需要写 <code>.value</code></p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">0</span>)</span><br><span class="line"><span class="keyword">const</span> state = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">    count</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(state.<span class="property">count</span>) <span class="comment">// 0</span></span><br><span class="line">state.<span class="property">count</span> += <span class="number">1</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(state.<span class="property">count</span>) <span class="comment">// 1</span></span><br></pre></td></tr></table></figure></div></li>
<li><p>如果将一个新的 <code>ref</code> 赋值给现在的响应对象中的 <code>ref</code>, 响应对象中的 <code>ref</code> 将会被替换掉</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 注意：如果将一个新的 ref 分配给现有的 ref，将替换旧的 ref</span></span><br><span class="line"><span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">1</span>);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;原来的ref-&gt;&quot;</span>, count.<span class="property">value</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> state = <span class="title function_">reactive</span>(&#123;</span><br><span class="line">  count,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;state.count-&gt;&quot;</span>, state.<span class="property">count</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用一个新的ref响应式对象 替换原来旧的ref响应式对象</span></span><br><span class="line"><span class="keyword">const</span> otherCount = <span class="title function_">ref</span>(<span class="number">2</span>);</span><br><span class="line">state.<span class="property">count</span> = otherCount;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;替换后的-&gt;&quot;</span>, state, state.<span class="property">count</span>);</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;原来的-&gt;&quot;</span>, count);</span><br></pre></td></tr></table></figure></div></li>
<li><p>当  <code>ref</code> 嵌套在 <code>reactive</code> 响应对象 <code>Object</code>中时，才不需要 <code>.value</code>, 如果从 <code>Array</code> 或者 <code>Map</code> 等原生集合类中访问 <code>ref</code>, 都是需要写 <code>.value</code> 的。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr = <span class="title function_">reactive</span>([<span class="title function_">ref</span>(<span class="number">0</span>)]);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(arr[<span class="number">0</span>].<span class="property">value</span>); <span class="comment">// 0 需要写 .value 才能访问</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> map = <span class="title function_">reactive</span>(<span class="keyword">new</span> <span class="title class_">Map</span>([[<span class="string">&quot;foo&quot;</span>, <span class="title function_">ref</span>(<span class="number">100</span>)]]));</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(map.<span class="title function_">get</span>(<span class="string">&quot;foo&quot;</span>).<span class="property">value</span>); <span class="comment">// 100 需要写 .value 才能访问</span></span><br></pre></td></tr></table></figure></div></li>
</ul>
<h2 id="5-3-computed"><a href="#5-3-computed" class="headerlink" title="5.3 computed"></a>5.3 computed</h2><p>传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">1</span>);</span><br><span class="line"><span class="keyword">const</span> plusOne = <span class="title function_">computed</span>(<span class="function">() =&gt;</span> count.<span class="property">value</span> + <span class="number">1</span>); <span class="comment">// 计算属性</span></span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(plusOne.<span class="property">value</span>); <span class="comment">// 2</span></span><br><span class="line">plusOne.<span class="property">value</span> += <span class="number">1</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(plusOne.<span class="property">value</span>); <span class="comment">// 2 默认只能获取 不能修改 修改没有效果</span></span><br></pre></td></tr></table></figure></div>

<p>或者传入一个 拥有 <code>get</code> 和 <code>set</code> 的函数对象，创建一个可以手动修改的计算状态</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">1</span>);</span><br><span class="line"><span class="keyword">const</span> plusOne = <span class="title function_">computed</span>(&#123;</span><br><span class="line">  <span class="attr">get</span>: <span class="function">() =&gt;</span> count.<span class="property">value</span>,</span><br><span class="line">  <span class="attr">set</span>: <span class="function">(<span class="params">val</span>) =&gt;</span> &#123;</span><br><span class="line">    count.<span class="property">value</span> = val;</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(plusOne.<span class="property">value</span>); <span class="comment">// 1 获取值 通过get</span></span><br><span class="line">plusOne.<span class="property">value</span> = <span class="number">2</span>;</span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(plusOne.<span class="property">value</span>); <span class="comment">// 2 设置值 通过set</span></span><br></pre></td></tr></table></figure></div>

<h2 id="5-4-readonly"><a href="#5-4-readonly" class="headerlink" title="5.4 readonly"></a>5.4 readonly</h2><p>传入一个对象（响应式或普通）或 ref，返回一个原始对象的__只读__代理，一个只读代理是“深层的”，对象内部任何嵌套的属性也是只读的。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> original = <span class="title function_">reactive</span>(&#123; <span class="attr">count</span>: <span class="number">0</span> &#125;);</span><br><span class="line"><span class="keyword">const</span> copy = <span class="title function_">readonly</span>(original);</span><br><span class="line"></span><br><span class="line"><span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// 依赖追踪 [函数立即执行 依赖的数据发生变化 也会重新执行]</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(copy.<span class="property">count</span>); <span class="comment">//0 10 立即执行了一次 数据变化后再执行一次</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">original.<span class="property">count</span> += <span class="number">10</span>;</span><br><span class="line"></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(copy.<span class="property">count</span>); <span class="comment">// 10</span></span><br><span class="line">copy.<span class="property">count</span>++; <span class="comment">// reactivity.esm-bundler.js?a1e9:297 Set operation on key &quot;count&quot; failed: target is readonly.</span></span><br><span class="line"><span class="variable language_">console</span>.<span class="title function_">log</span>(copy.<span class="property">count</span>); <span class="comment">// 10  copy是一个只读的代理对象 不能修改</span></span><br></pre></td></tr></table></figure></div>

<h2 id="5-5-watchEffect"><a href="#5-5-watchEffect" class="headerlink" title="5.5 watchEffect"></a>5.5 watchEffect</h2><p>立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">0</span>);</span><br><span class="line"><span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> <span class="variable language_">console</span>.<span class="title function_">log</span>(count.<span class="property">value</span>)); <span class="comment">// 0 1</span></span><br><span class="line"><span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  count.<span class="property">value</span>++; <span class="comment">// 依赖的数据count改变 会重新执行 watchEffect中的回调函数</span></span><br><span class="line">&#125;, <span class="number">100</span>);</span><br></pre></td></tr></table></figure></div>

<p><strong>停止侦听</strong></p>
<p>当 <code>watchEffect</code> 在组件的 <code>setup()</code> 函数或生命周期钩子函数被调用时，侦听器会被链接到该组件的生命周期，并在该组件卸载时自动停止。</p>
<p>在一些情况下，也可以显示调用返回值以停止侦听：</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 停止侦听</span></span><br><span class="line"><span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> stop = <span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;count发生了变化:&quot;</span>, count.<span class="property">value</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="built_in">setInterval</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (count.<span class="property">value</span> === <span class="number">5</span>) <span class="title function_">stop</span>(); <span class="comment">// 如果等于5 停止侦听 watchEffect回调函数的执行</span></span><br><span class="line">  count.<span class="property">value</span>++;</span><br><span class="line">&#125;, <span class="number">1000</span>);</span><br></pre></td></tr></table></figure></div>

<p><strong>清除副作用</strong></p>
<p>有时副作用函数会执行一些异步的副作用，这些响应需要在其失效时清除（即完成之前状态已经改变 了）。所以侦听副作用传入的函数可以接收一个 <code>onInvalidate</code> 函数作为参数，用来注册清理失效时候的回调。当一下情况发生时，这个__失效回调__ 会被触发。</p>
<ul>
<li>副作用函数即将重新执行</li>
<li>侦听器被停止( 如果在 <code>setup</code>  或 生命周期钩子函数中使用了 <code>watchEffect</code>, 则在卸组件时)</li>
</ul>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"> <span class="keyword">const</span> id = <span class="title function_">ref</span>(<span class="number">0</span>);</span><br><span class="line"><span class="keyword">function</span> <span class="title function_">preformAsyncOperation</span>(<span class="params"></span>) &#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="built_in">setTimeout</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">      <span class="title function_">resolve</span>(<span class="string">&quot;123456&quot;</span>);</span><br><span class="line">    &#125;, <span class="number">1000</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">watchEffect</span>(<span class="function">(<span class="params">onInvalidate</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">const</span> token = <span class="title function_">preformAsyncOperation</span>(id.<span class="property">value</span>);</span><br><span class="line">  <span class="title function_">onInvalidate</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// id 改变时 或 停止侦听时</span></span><br><span class="line">    <span class="comment">// 取消之前的异步操作</span></span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;执行&quot;</span>);</span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></div>

<p><strong>副作用刷新的时机</strong></p>
<p>Vue的响应式系统会缓存副作用函数，并且异步的刷新它们，这样可以避免同一个tick中多个状态改变导致的不必要的重复调用。在核心的具体实现中，组件的更新函数也是一个被侦听的副作用。当一个用户定义的副作用函数进入队列时，会在所有的组件更新后执行。</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span>&#123;&#123; count &#125;&#125;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">0</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        <span class="variable language_">console</span>.<span class="title function_">log</span>(count.<span class="property">value</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">        count,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>

<p>注意：</p>
<ul>
<li><code>count</code> 会在初始运行时同步打印出来</li>
<li>更改 <code>count</code> 时，将在组件__更新后__ 执行副作用。</li>
<li>初始化运行是在组件声明周期 <code>mounted</code> 之前执行的。因此，如果你希望在编写副作用函数时访问 DOM( 或 模板ref ), 请在 <code>onMounted</code> 钩子中执行。</li>
</ul>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">onMounted</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 可以访问DOM 或者 template refs</span></span><br><span class="line">    &#125;)</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 如：</span></span><br><span class="line"><span class="title function_">onMounted</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;生命周期挂载后...&quot;</span>);</span><br><span class="line">  <span class="title function_">watchEffect</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(count.<span class="property">value</span>);</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="variable language_">document</span>.<span class="title function_">getElementById</span>(<span class="string">&quot;box&quot;</span>)); <span class="comment">// 可以访问到DOM 放到onMounted外部获取到null</span></span><br><span class="line">  &#125;);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></div>

<p>如果副作用函数需要同步或在组件更新之前运行，可以传递一个拥有 <code>flush</code> 属性的对象作为选项 （ 选项 <code>post</code> ）;</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 同步运行</span></span><br><span class="line"><span class="title function_">wetchEffect</span>(</span><br><span class="line">	<span class="function">() =&gt;</span> &#123;</span><br><span class="line">       <span class="comment">/* ... */</span> </span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">flush</span>: <span class="string">&#x27;sync&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">)</span><br><span class="line"></span><br><span class="line"><span class="comment">// 组件更新前执行</span></span><br><span class="line"><span class="title function_">watchEffect</span>(</span><br><span class="line">	<span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">/* ... */</span></span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        <span class="attr">flush</span>: <span class="string">&#x27;pre&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">)</span><br></pre></td></tr></table></figure></div>

<h2 id="5-6-watch"><a href="#5-6-watch" class="headerlink" title="5.6 watch"></a>5.6 watch</h2><p><code>watch</code> API完全等效于2.x <code>this.$watch</code> ( 以及 <code>watch</code> 中相应的选项 )。 <code>watch</code> 需要侦听特定的数据源，并在回调中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源变更时才会执行回调。</p>
<ul>
<li><p>对比 <code>watchEffect</code>, watch允许我们:</p>
<ul>
<li>懒执行副作用</li>
<li>更明确哪些状态的改变会触发侦听器重新运行副作用</li>
<li>访问侦听状态变化后的值</li>
</ul>
</li>
<li><p>侦听单个数据源</p>
<p>侦听器的数据源可以使一个返回getter的函数，也可以说ref:</p>
</li>
</ul>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 侦听一个getter</span></span><br><span class="line"><span class="keyword">const</span> state = <span class="title function_">reactive</span>(&#123; <span class="attr">count</span>: <span class="number">0</span> &#125;);</span><br><span class="line"><span class="title function_">watch</span>(</span><br><span class="line">  <span class="function">() =&gt;</span> state.<span class="property">count</span>,</span><br><span class="line">  <span class="function">(<span class="params">count, prevCount</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;count-&gt;&quot;</span>, count, <span class="string">&quot;preCount-&gt;&quot;</span>, prevCount); <span class="comment">// count-&gt; 1 preCount-&gt; 0</span></span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line">state.<span class="property">count</span>++;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 直接侦听一个ref</span></span><br><span class="line"><span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">10</span>);</span><br><span class="line"><span class="title function_">watch</span>(count, <span class="function">(<span class="params">count, prevCount</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;count-&gt;&quot;</span>, count, <span class="string">&quot;preCount-&gt;&quot;</span>, prevCount); <span class="comment">// count-&gt; 11 preCount-&gt; 10</span></span><br><span class="line">&#125;);</span><br><span class="line">count.<span class="property">value</span>++;</span><br></pre></td></tr></table></figure></div>

<ul>
<li><code>watcher</code> 也可以侦听多个数据源</li>
</ul>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">watch</span>([fooRef, barRef], <span class="function">(<span class="params">[foo, bar], [prevFoo, prevBar]</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="comment">// foo bar 为当前的值 【新的值】</span></span><br><span class="line">    <span class="comment">// prevFoo prevBar 为之前的值 【旧的值】</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></div>



<h1 id="6-生命周期钩子函数"><a href="#6-生命周期钩子函数" class="headerlink" title="6 生命周期钩子函数"></a>6 生命周期钩子函数</h1><p>可以直接导入 <code>onXXX</code> 的函数来注册生命周期钩子函数：</p>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> &#123; onMounted, onUpdated, onUnmounted &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span><br><span class="line"></span><br><span class="line"><span class="title function_">onMounted</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;onMounted&quot;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title function_">onUpdated</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;onUpdated&quot;</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="title function_">onUnmounted</span>(<span class="function">() =&gt;</span> &#123;</span><br><span class="line">  <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&quot;onUnmounted&quot;</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></div>

<p>这些生命周期钩子函数只能在 <code>setup</code> 期间同步使用。</p>
<p>组件实例上下文也是生命周期钩子函数同步执行期间设置的，因此，在卸载组件时，在生命周期钩子内部同步创建的侦听器和计算状态也将同步删除。</p>
<ul>
<li><p><strong>与2.x版本生命周期相对于的API</strong></p>
<ul>
<li><code>beforeCreate</code>  - &gt; <code>setup</code></li>
<li><code>created</code> - &gt; <code>setup</code></li>
<li><code>beforeMount</code> -&gt; <code>onBeforeMount</code></li>
<li><code>mounted</code> - &gt; <code>onMounted</code></li>
<li><code>beforeUpdate</code> - &gt; <code>onBeforeUpdate</code></li>
<li><code>updated</code> - &gt; <code>onUpdated</code></li>
<li><code>beforeDestroy</code> - &gt; <code>onBeforeUnmount</code></li>
<li><code>destroyed</code> - &gt; <code>onUnmounted</code></li>
<li><code>errorCaptured</code> - &gt; <code>onErrorCaptured</code></li>
</ul>
</li>
<li><p>新增的钩子函数</p>
<p>除了和2.x生命周期相同的周期之外，组合式API还提供了一下调试钩子函数</p>
<ul>
<li><code>onRenderTracked</code></li>
<li><code>onRenderTriggered</code></li>
</ul>
<p>两个钩子函数都接收一个 <code>DebuggerEvent</code>, 与 <code>watchEffect</code> 参数选项中的 <code>onTrack</code> 和 <code>onTrigger</code> 类似</p>
</li>
</ul>
<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span><br><span class="line">    <span class="title function_">onRenderTrigger</span>(<span class="params">e</span>) &#123;</span><br><span class="line">        <span class="keyword">debugger</span>; <span class="comment">// 检查哪个依赖数据导致组件重新渲染</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></div>



<h1 id="7-Teleport"><a href="#7-Teleport" class="headerlink" title="7. Teleport"></a>7. Teleport</h1><p>Teleport提供了一种的方法，使我们可以控制要在DOM中哪个父对象下呈现HTML，而不必求助于全局状态或将其拆分为两个部分.</p>
<p>Tepeport可以让我们的组件在别的dom容器中呈现，而组件内部的状态不会发生任何变化。</p>
<h2 id="7-1-teleport传送的目标位置"><a href="#7-1-teleport传送的目标位置" class="headerlink" title="7.1 teleport传送的目标位置"></a>7.1 teleport传送的目标位置</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"># index.<span class="property">html</span></span><br><span class="line"> &lt;div id=<span class="string">&quot;app&quot;</span>&gt;&lt;/div&gt;</span><br><span class="line">    </span><br><span class="line">&lt;!-- 传送目标 --&gt;</span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;teleport-target&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>

<h2 id="7-2-App-vue使用模态框组件"><a href="#7-2-App-vue使用模态框组件" class="headerlink" title="7.2 App.vue使用模态框组件"></a>7.2 App.vue使用模态框组件</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>teleport demo<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">	# 使用模态框组件</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">Model</span>&gt;</span><span class="tag">&lt;/<span class="name">Model</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">import</span> <span class="title class_">Model</span> <span class="keyword">from</span> <span class="string">&#x27;./components/model.vue&#x27;</span> <span class="comment">// 引入模态框组件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="attr">components</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      <span class="title class_">Model</span> <span class="comment">// 注册模态框组件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;less&quot;</span> <span class="attr">scoped</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>

<h2 id="7-3-模态框组件"><a href="#7-3-模态框组件" class="headerlink" title="7.3 模态框组件"></a>7.3 模态框组件</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;showModel&quot;</span> <span class="attr">class</span>=<span class="string">&quot;btn&quot;</span>&gt;</span>查看详情<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">	</span></span><br><span class="line"><span class="language-xml">    # 最终 teleport内部的内容 渲染到index.html中的容器 div#teleport-target中 实现传送</span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- to 属性就是最终渲染的目标容器位置】 --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">teleport</span> <span class="attr">to</span>=<span class="string">&quot;#teleport-target&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;<span class="name">div</span> <span class="attr">v-show</span>=<span class="string">&quot;visible&quot;</span> <span class="attr">class</span>=<span class="string">&quot;model&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;model-wrapper&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;content&quot;</span>&gt;</span>内容<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">          <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;hideModel&quot;</span> &gt;</span>取消<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">      <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;/<span class="name">teleport</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"> import &#123; ref &#125; from &#x27;vue&#x27;; # 引入ref</span></span><br><span class="line"><span class="language-xml">  </span></span><br><span class="line"><span class="language-xml">  export default &#123;</span></span><br><span class="line"><span class="language-xml">      setup() &#123;</span></span><br><span class="line"><span class="language-xml">        const visible = ref(false); # 定义响应式数据</span></span><br><span class="line"><span class="language-xml">        </span></span><br><span class="line"><span class="language-xml">        const showModel = () =&gt; &#123; # 显示模态框</span></span><br><span class="line"><span class="language-xml">          visible.value = true;</span></span><br><span class="line"><span class="language-xml">        &#125;</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">        const hideModel = () =&gt; &#123; # 隐藏模态框</span></span><br><span class="line"><span class="language-xml">          visible.value = false</span></span><br><span class="line"><span class="language-xml">        &#125;</span></span><br><span class="line"><span class="language-xml">		</span></span><br><span class="line"><span class="language-xml">        # 暴露给组件</span></span><br><span class="line"><span class="language-xml">        return &#123;</span></span><br><span class="line"><span class="language-xml">          visible, </span></span><br><span class="line"><span class="language-xml">          showModel,</span></span><br><span class="line"><span class="language-xml">          hideModel</span></span><br><span class="line"><span class="language-xml">        &#125;</span></span><br><span class="line"><span class="language-xml">      &#125;</span></span><br><span class="line"><span class="language-xml">    &#125;</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">style</span> <span class="attr">lang</span>=<span class="string">&quot;less&quot;</span> <span class="attr">scoped</span>&gt;</span><span class="language-css"></span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"> # 模态框组件样式</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"><span class="selector-class">.model</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">position</span>: fixed;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">display</span>: flex;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">justify-content</span>: center;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">align-items</span>: center;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">left</span>: <span class="number">0</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">top</span>: <span class="number">0</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">width</span>: <span class="number">100%</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">height</span>: <span class="number">100%</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">background-color</span>: <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>, <span class="number">0.5</span>);</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="attribute">z-index</span>: <span class="number">10</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  <span class="selector-class">.model-wrapper</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">display</span>: flex;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">flex-direction</span>: column;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">padding</span>: <span class="number">20px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">width</span>: <span class="number">400px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">height</span>: <span class="number">300px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="attribute">border-radius</span>: <span class="number">4px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="selector-class">.content</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">      <span class="attribute">flex</span>:<span class="number">1</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    <span class="selector-tag">button</span> &#123;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">      <span class="attribute">height</span>: <span class="number">30px</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">      <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">      <span class="attribute">border</span>: <span class="number">1px</span> solid <span class="built_in">rgba</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,<span class="number">0.1</span>);</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">      <span class="attribute">box-shadow</span>: <span class="number">2px</span> <span class="number">2px</span> <span class="number">2px</span> <span class="number">#ccc</span>;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">      <span class="attribute">outline</span>: none;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-css"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>



<h1 id="8-Fragments"><a href="#8-Fragments" class="headerlink" title="8 Fragments"></a>8 Fragments</h1><p>vue3.x中，组件支持一个template中有多个根节点，即<code>Fragments</code>文档片段</p>
<h2 id="8-1-Vue2-x不支持多个根组件"><a href="#8-1-Vue2-x不支持多个根组件" class="headerlink" title="8.1 Vue2.x不支持多个根组件"></a>8.1 Vue2.x不支持多个根组件</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">header</span>&gt;</span>...<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">main</span>&gt;</span>...<span class="tag">&lt;/<span class="name">main</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">footer</span>&gt;</span>...<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure></div>

<h2 id="8-2-Vue3-x支持多个根组件"><a href="#8-2-Vue3-x支持多个根组件" class="headerlink" title="8.2 Vue3.x支持多个根组件"></a>8.2 Vue3.x支持多个根组件</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">header</span>&gt;</span>...<span class="tag">&lt;/<span class="name">header</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">main</span> <span class="attr">v-bind</span>=<span class="string">&quot;$attrs&quot;</span>&gt;</span>...<span class="tag">&lt;/<span class="name">main</span>&gt;</span></span></span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">footer</span>&gt;</span>...<span class="tag">&lt;/<span class="name">footer</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure></div>



<h1 id="9-provide-和-inject"><a href="#9-provide-和-inject" class="headerlink" title="9 provide 和 inject"></a>9 provide 和 inject</h1><p><code>provide()</code> 和 <code>inject()</code> 可以实现嵌套组件之间的数据传递。这两个函数只能在 <code>setup()</code> 函数中使用。父级组件中使用 <code>provide()</code> 函数向下传递数据；子级组件中使用 <code>inject()</code> 获取上层传递过来的数据，无论层级多少，都可以获取父组件传递过来的数据。</p>
<h2 id="9-1-共享数据"><a href="#9-1-共享数据" class="headerlink" title="9.1 共享数据"></a>9.1 共享数据</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"># 根组件<span class="title class_">App</span>.<span class="property">vue</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>我是根组件 App.vue<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">my-component1</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">MyComponent1</span> <span class="keyword">from</span> <span class="string">&#x27;./components/my-component1.vue&#x27;</span> <span class="comment">// 引入组件1</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; provide &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span> <span class="comment">// 引入 provide</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">name</span>: <span class="string">&#x27;app&#x27;</span>,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">provide</span>(<span class="string">&#x27;initColor&#x27;</span>, <span class="string">&#x27;red&#x27;</span>) <span class="comment">// 给子组件传递数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title class_">MyComponent1</span> <span class="comment">// 注册组件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>

<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"># 子组件<span class="number">1</span> 【第一个层级】</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    // 使用父组件传递过来的数据</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">:style</span>=<span class="string">&quot;&#123;&#x27;background-color&#x27;: color&#125;&quot;</span>&gt;</span>组件1<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">my-component2</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component2</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> <span class="title class_">MyComponent2</span> <span class="keyword">from</span> <span class="string">&#x27;./my-component2.vue&#x27;</span> <span class="comment">// 引入子组件2</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; inject &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span> <span class="comment">// 引入inject</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> color = <span class="title function_">inject</span>(<span class="string">&#x27;initColor&#x27;</span>) <span class="comment">// 获取父组件的数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      color</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;,</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="attr">components</span>: &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title class_">MyComponent2</span> <span class="comment">// 注册组件</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>

<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"># 子组件<span class="number">2</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    // 使用父组件传递过来的数据</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h5</span> <span class="attr">:style</span>=<span class="string">&quot;&#123;backgroundColor: color&#125;&quot;</span>&gt;</span>组件2<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="comment">// 1. 按需导入 inject</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; inject &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> color = <span class="title function_">inject</span>(<span class="string">&#x27;initColor&#x27;</span>) <span class="comment">// 获取父组件传递过来的数据</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      color</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br><span class="line"></span><br></pre></td></tr></table></figure></div>

<h2 id="9-2-共享ref响应式数据"><a href="#9-2-共享ref响应式数据" class="headerlink" title="9.2 共享ref响应式数据"></a>9.2 共享ref响应式数据</h2><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;app&quot;</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h1</span>&gt;</span>App 根组件<span class="tag">&lt;/<span class="name">h1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">	# 点击按钮 切换不同的颜色</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;color=&#x27;red&#x27;&quot;</span>&gt;</span>红色<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;color=&#x27;green&#x27;&quot;</span>&gt;</span>绿色<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;color=&#x27;pink&#x27;&quot;</span>&gt;</span>粉色<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">hr</span> /&gt;</span></span></span><br><span class="line"><span class="language-xml">    # 使用组件1</span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">my-component1</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml"># 引入组件1</span></span><br><span class="line"><span class="language-xml">import MyComponent1 from &#x27;./components/my-component1.vue&#x27;</span></span><br><span class="line"><span class="language-xml">import &#123; provide, ref &#125; from &#x27;vue&#x27; # 引入 provide 和 ref</span></span><br><span class="line"><span class="language-xml">export default &#123;</span></span><br><span class="line"><span class="language-xml">  name: &#x27;app&#x27;,</span></span><br><span class="line"><span class="language-xml">  setup() &#123;</span></span><br><span class="line"><span class="language-xml">    const color = ref(&#x27;red&#x27;)  # 响应式数据 color</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    provide(&#x27;initColor&#x27;, color) # 传递数据给子组件</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    return &#123;</span></span><br><span class="line"><span class="language-xml">      color</span></span><br><span class="line"><span class="language-xml">    &#125;</span></span><br><span class="line"><span class="language-xml">  &#125;,</span></span><br><span class="line"><span class="language-xml">  # 注册组件</span></span><br><span class="line"><span class="language-xml">  components: &#123;</span></span><br><span class="line"><span class="language-xml">    MyComponent1</span></span><br><span class="line"><span class="language-xml">  &#125;</span></span><br><span class="line"><span class="language-xml">&#125;</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>



<h1 id="10-template-Refs"><a href="#10-template-Refs" class="headerlink" title="10 template Refs"></a>10 template Refs</h1><h3 id="10-1-引用template中的元素"><a href="#10-1-引用template中的元素" class="headerlink" title="10.1 引用template中的元素"></a>10.1 引用template中的元素</h3><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h3</span> <span class="attr">ref</span>=<span class="string">&quot;title&quot;</span>&gt;</span>组件1<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref, onMounted &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> title = <span class="title function_">ref</span>(<span class="literal">null</span>) <span class="comment">// 设置响应式数据title</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="comment">// 生命周期 onMounted 可以操作dom</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="title function_">onMounted</span>(<span class="function">() =&gt;</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      title.<span class="property">value</span>.<span class="property">style</span>.<span class="property">color</span> = <span class="string">&#x27;red&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      </span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      title</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>

<h3 id="10-2-引用组件"><a href="#10-2-引用组件" class="headerlink" title="10.2 引用组件"></a>10.2 引用组件</h3><div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"># <span class="title class_">App</span>.<span class="property">vue</span> 根组件</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h3</span>&gt;</span>App 根组件<span class="tag">&lt;/<span class="name">h3</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;getNumber&quot;</span>&gt;</span>获取组件1中的count的值<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="comment">&lt;!-- 组件1 --&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">my-component1</span> <span class="attr">ref</span>=<span class="string">&quot;comP1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">my-component1</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">import &#123; ref &#125; from &#x27;vue&#x27;</span></span><br><span class="line"><span class="language-xml">import MyComponent1 from &#x27;./components/my-component1&#x27;</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">export default &#123;</span></span><br><span class="line"><span class="language-xml">  setup() &#123;</span></span><br><span class="line"><span class="language-xml">    const comP1 = ref(null) # 响应式数据comP1</span></span><br><span class="line"><span class="language-xml">	</span></span><br><span class="line"><span class="language-xml">    # 获取数据的方法</span></span><br><span class="line"><span class="language-xml">    const getNumber = () =&gt; &#123;</span></span><br><span class="line"><span class="language-xml">      console.log(comP1.value.count)</span></span><br><span class="line"><span class="language-xml">    &#125;</span></span><br><span class="line"><span class="language-xml"></span></span><br><span class="line"><span class="language-xml">    return &#123;</span></span><br><span class="line"><span class="language-xml">      comP1,</span></span><br><span class="line"><span class="language-xml">      getNumber</span></span><br><span class="line"><span class="language-xml">    &#125;</span></span><br><span class="line"><span class="language-xml">  &#125;,</span></span><br><span class="line"><span class="language-xml">  components: &#123;</span></span><br><span class="line"><span class="language-xml">    MyComponent1</span></span><br><span class="line"><span class="language-xml">  &#125;</span></span><br><span class="line"><span class="language-xml">&#125;</span></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>

<div class="highlight-container" data-rel="Javascript"><figure class="iseeu highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"># 组件<span class="number">1</span></span><br><span class="line">&lt;template&gt;</span><br><span class="line">  <span class="language-xml"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">h5</span>&gt;</span>组件1 &#123;&#123;count&#125;&#125;<span class="tag">&lt;/<span class="name">h5</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">    <span class="tag">&lt;<span class="name">button</span> @<span class="attr">click</span>=<span class="string">&quot;count+=1&quot;</span>&gt;</span>+1<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span></span><br><span class="line"><span class="language-xml">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span></span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line"><span class="language-xml"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="language-javascript"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">import</span> &#123; ref &#125; <span class="keyword">from</span> <span class="string">&#x27;vue&#x27;</span></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"><span class="keyword">export</span> <span class="keyword">default</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  <span class="title function_">setup</span>(<span class="params"></span>) &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">const</span> count = <span class="title function_">ref</span>(<span class="number">0</span>)</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    <span class="keyword">return</span> &#123;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">      count</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">    &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">  &#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml">&#125;</span></span></span><br><span class="line"><span class="language-javascript"><span class="language-xml"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure></div>



            </div>

            

            
                <ul class="post-tags-box">
                    
                        <li class="tag-item">
                            <a href="/tags/vue/">#vue</a>&nbsp;
                        </li>
                    
                </ul>
            

            

            
                <div class="article-nav">
                    
                        <div class="article-prev">
                            <a class="prev"
                            rel="prev"
                            href="/2023/04/25/%E9%A1%B5%E9%9D%A2%E6%82%AC%E6%B5%AE%E6%8C%89%E9%92%AE%E5%8F%AF%E6%8B%96%E5%8A%A8%E5%AE%9E%E7%8E%B0-vue2%E5%92%8Cvue3%E5%86%99%E6%B3%95/"
                            >
                                <span class="left arrow-icon flex-center">
                                    <i class="fa-solid fa-chevron-left"></i>
                                </span>
                                <span class="title flex-center">
                                    <span class="post-nav-title-item">页面悬浮按钮可拖动实现(vue2和vue3写法)</span>
                                    <span class="post-nav-item">上一篇</span>
                                </span>
                            </a>
                        </div>
                    
                    
                        <div class="article-next">
                            <a class="next"
                            rel="next"
                            href="/2023/04/20/Cursor%EF%BC%9AGPT-4-%E9%A9%B1%E5%8A%A8%E7%9A%84%E5%BC%BA%E5%A4%A7%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E5%99%A8/"
                            >
                                <span class="title flex-center">
                                    <span class="post-nav-title-item">Cursor：GPT-4 驱动的强大代码编辑器</span>
                                    <span class="post-nav-item">下一篇</span>
                                </span>
                                <span class="right arrow-icon flex-center">
                                    <i class="fa-solid fa-chevron-right"></i>
                                </span>
                            </a>
                        </div>
                    
                </div>
            


            
                <div class="comment-container">
                    <div class="comments-container">
    <div id="comment-anchor"></div>
    <div class="comment-area-title">
        <i class="fa-solid fa-comments"></i>&nbsp;评论
    </div>
    

        
            
 
    <div id="waline"></div>
    <script type="module"  >
        import { init } from 'https://evan.beee.top/js/waline.mjs';

        function loadWaline() {
            init({
                el: '#waline',
                serverURL: 'https://a.lengwuwen.cn',
                lang: 'zh-CN',
                dark: 'body[class~="dark-mode"]',
                requiredMeta: ['nick','mail'], // cannot customize by theme config, change it yourself
            });
        }

        if ('false') {
            const loadWalineTimeout = setTimeout(() => {
                loadWaline();
                clearTimeout(loadWalineTimeout);
            }, 1000);
        } else {
            window.addEventListener('DOMContentLoaded', loadWaline);
        }
        
    </script>



        
    
</div>

                </div>
            
        </div>

        
            <div class="toc-content-container">
                <div class="post-toc-wrap">
    <div class="post-toc">
        <div class="toc-title">此页目录</div>
        <div class="page-title">vue3开发文档</div>
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#Vue3-x%E5%BC%80%E5%8F%91%E6%96%87%E6%A1%A3"><span class="nav-text">Vue3.x开发文档</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#1-%E7%89%B9%E7%82%B9"><span class="nav-text">1 特点</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-Vue3-x-VS-Vue2-x-%E4%B8%BB%E8%A6%81%E6%94%B9%E8%BF%9B"><span class="nav-text">2 Vue3.x VS  Vue2.x 主要改进</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1-%E6%8F%90%E5%8D%87%E8%BF%90%E8%A1%8C%E6%97%B6%E6%80%A7%E8%83%BD%EF%BC%9A%E9%87%8D%E5%86%99-VDOM"><span class="nav-text">2.1 提升运行时性能：重写 VDOM</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2-%E6%8F%90%E5%8D%87%E7%BD%91%E7%BB%9C%E6%80%A7%E8%83%BD%EF%BC%9A-tree-shaking-%E6%9C%BA%E5%88%B6"><span class="nav-text">2.2 提升网络性能： tree-shaking 机制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-3-%E5%AE%8C%E5%85%A8%E7%9A%84-typeScript-%E6%94%AF%E6%8C%81"><span class="nav-text">2.3 完全的 typeScript 支持</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-4-%E5%AF%B9%E7%94%A8%E6%88%B7%E7%9A%84%E4%BE%BF%E5%88%A9%E6%80%A7%E6%94%B9%E8%BF%9B"><span class="nav-text">2.4 对用户的便利性改进</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-5-%E7%94%9F%E6%80%81%E5%9C%88%E6%94%B9%E8%BF%9B"><span class="nav-text">2.5 生态圈改进</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-6-Vue3-x%E5%90%91%E4%B8%8B%E5%85%BC%E5%AE%B9"><span class="nav-text">2.6 Vue3.x向下兼容</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-%E5%AE%89%E8%A3%85"><span class="nav-text">3 安装</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-%E6%A0%87%E5%87%86%E5%AE%89%E8%A3%85"><span class="nav-text">3.1 标准安装</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-vite"><span class="nav-text">3.2 vite</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-%E9%A1%B9%E7%9B%AE%E7%9B%AE%E5%BD%95%E8%AF%A6%E8%A7%A3"><span class="nav-text">3.3 项目目录详解</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4-%E5%88%9D%E5%A7%8B%E4%BB%A3%E7%A0%81%E8%AF%A6%E8%A7%A3"><span class="nav-text">3.4 初始代码详解</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-setup"><span class="nav-text">4 setup</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4-1-%E8%B0%83%E7%94%A8%E6%97%B6%E6%9C%BA"><span class="nav-text">4.1 调用时机</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-2-%E6%A8%A1%E6%9D%BF%E4%B8%AD%E4%BD%BF%E7%94%A8"><span class="nav-text">4.2 模板中使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-3-%E5%8F%82%E6%95%B0"><span class="nav-text">4.3 参数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-4-this%E7%9A%84%E7%94%A8%E6%B3%95"><span class="nav-text">4.4 this的用法</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-%E5%93%8D%E5%BA%94%E5%BC%8F%E7%B3%BB%E7%BB%9Fapi"><span class="nav-text">5 响应式系统api</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#5-1-reactive"><span class="nav-text">5.1 reactive</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-2-ref"><span class="nav-text">5.2 ref</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-3-computed"><span class="nav-text">5.3 computed</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-4-readonly"><span class="nav-text">5.4 readonly</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-5-watchEffect"><span class="nav-text">5.5 watchEffect</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-6-watch"><span class="nav-text">5.6 watch</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#6-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0"><span class="nav-text">6 生命周期钩子函数</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#7-Teleport"><span class="nav-text">7. Teleport</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#7-1-teleport%E4%BC%A0%E9%80%81%E7%9A%84%E7%9B%AE%E6%A0%87%E4%BD%8D%E7%BD%AE"><span class="nav-text">7.1 teleport传送的目标位置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-2-App-vue%E4%BD%BF%E7%94%A8%E6%A8%A1%E6%80%81%E6%A1%86%E7%BB%84%E4%BB%B6"><span class="nav-text">7.2 App.vue使用模态框组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-3-%E6%A8%A1%E6%80%81%E6%A1%86%E7%BB%84%E4%BB%B6"><span class="nav-text">7.3 模态框组件</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#8-Fragments"><span class="nav-text">8 Fragments</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#8-1-Vue2-x%E4%B8%8D%E6%94%AF%E6%8C%81%E5%A4%9A%E4%B8%AA%E6%A0%B9%E7%BB%84%E4%BB%B6"><span class="nav-text">8.1 Vue2.x不支持多个根组件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#8-2-Vue3-x%E6%94%AF%E6%8C%81%E5%A4%9A%E4%B8%AA%E6%A0%B9%E7%BB%84%E4%BB%B6"><span class="nav-text">8.2 Vue3.x支持多个根组件</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#9-provide-%E5%92%8C-inject"><span class="nav-text">9 provide 和 inject</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#9-1-%E5%85%B1%E4%BA%AB%E6%95%B0%E6%8D%AE"><span class="nav-text">9.1 共享数据</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#9-2-%E5%85%B1%E4%BA%ABref%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE"><span class="nav-text">9.2 共享ref响应式数据</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#10-template-Refs"><span class="nav-text">10 template Refs</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#10-1-%E5%BC%95%E7%94%A8template%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0"><span class="nav-text">10.1 引用template中的元素</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#10-2-%E5%BC%95%E7%94%A8%E7%BB%84%E4%BB%B6"><span class="nav-text">10.2 引用组件</span></a></li></ol></li></ol></li></ol>

    </div>
</div>
            </div>
        
    </div>
</div>


                

            </div>
            
            

        </div>

        <div class="main-content-footer">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info">
            &copy;
            
              <span>2022</span>
              -
            
            2023&nbsp;&nbsp;<i class="fa-solid fa-heart fa-beat" style="--fa-animation-duration: 0.5s; color: #f54545"></i>&nbsp;&nbsp;<a href="/">冷武汶</a>
        </div>
        
        <div class="theme-info info-item">
            <span class="powered-by-container">由 <?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1rem" height="1rem" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path fill="#0E83CD" d="M256.4,25.8l-200,115.5L56,371.5l199.6,114.7l200-115.5l0.4-230.2L256.4,25.8z M349,354.6l-18.4,10.7l-18.6-11V275H200v79.6l-18.4,10.7l-18.6-11v-197l18.5-10.6l18.5,10.8V237h112v-79.6l18.5-10.6l18.5,10.8V354.6z"/></svg><a target="_blank" href="https://hexo.io">Hexo</a> 驱动</span>
                <br>
            <span class="theme-version-container">主题&nbsp;<a class="theme-version" target="_blank" href="https://github.com/EvanNotFound/hexo-theme-redefine">Redefine v2.1.2</a>
        </div>
        
        
        
            <div id="start_div" style="display:none">
                2022/8/17 11:45:14
            </div>
            <div>
                博客已运行 <span class="odometer" id="runtime_days" ></span> 天 <span class="odometer" id="runtime_hours"></span> 小时 <span class="odometer" id="runtime_minutes"></span> 分钟 <span class="odometer" id="runtime_seconds"></span> 秒
            </div>
        
        
        
            <script async >
                try {
                    function odometer_init() {
                    const elements = document.querySelectorAll('.odometer');
                    elements.forEach(el => {
                        new Odometer({
                            el,
                            format: '( ddd).dd',
                            duration: 200
                        });
                    });
                    }
                    odometer_init();
                } catch (error) {}
            </script>
        
        
        
    </div>  
</footer>
        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="article-tools-list">
        <!-- TOC aside toggle -->
        
            <li class="right-bottom-tools page-aside-toggle">
                <i class="fa-regular fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
            <li class="go-comment">
                <i class="fa-regular fa-comments"></i>
            </li>
        
    </ul>
</div>

        </div>
    

    <div class="right-side-tools-container">
        <div class="side-tools-container">
    <ul class="hidden-tools-list">
        <li class="right-bottom-tools tool-font-adjust-plus flex-center">
            <i class="fa-regular fa-magnifying-glass-plus"></i>
        </li>

        <li class="right-bottom-tools tool-font-adjust-minus flex-center">
            <i class="fa-regular fa-magnifying-glass-minus"></i>
        </li>

        <li class="right-bottom-tools tool-expand-width flex-center">
            <i class="fa-regular fa-expand"></i>
        </li>

        <li class="right-bottom-tools tool-dark-light-toggle flex-center">
            <i class="fa-regular fa-moon"></i>
        </li>

        <!-- rss -->
        

        

        <li class="right-bottom-tools tool-scroll-to-bottom flex-center">
            <i class="fa-regular fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="visible-tools-list">
        <li class="right-bottom-tools toggle-tools-list flex-center">
            <i class="fa-regular fa-cog fa-spin"></i>
        </li>
        
            <li class="right-bottom-tools tool-scroll-to-top flex-center">
                <i class="arrow-up fas fa-arrow-up"></i>
                <span class="percent"></span>
            </li>
        
        
    </ul>
</div>

    </div>

    <div class="image-viewer-container">
    <img src="">
</div>


    


</main>




<script src="/js/utils.js"></script>

<script src="/js/main.js"></script>

<script src="/js/layouts/navbarShrink.js"></script>

<script src="/js/tools/scrollTopBottom.js"></script>

<script src="/js/tools/lightDarkSwitch.js"></script>





    
<script src="/js/tools/codeBlock.js"></script>




    
<script src="/js/layouts/lazyload.js"></script>




    
<script src="/js/tools/runtime.js"></script>

    
<script src="/js/layouts/odometer.min.js"></script>

    
<link rel="stylesheet" href="/assets/odometer-theme-minimal.css">




  
<script src="/js/libs/Typed.min.js"></script>

  
<script src="/js/plugins/typed.js"></script>







<div class="post-scripts">
    
        
<script src="/js/tools/tocToggle.js"></script>

<script src="/js/libs/anime.min.js"></script>

<script src="/js/layouts/toc.js"></script>

<script src="/js/plugins/tabs.js"></script>

    
</div>




</body>
</html>
